<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/exam.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<common-header active-path="match-item.html"></common-header>
	<section class="content">
		<section class="container">
			<section class="breadcrumb">
				<img src="./images/loc.png" alt="">
				<section>
					赛项 > 参赛详情 > <a href="javascript:;">在线编程</a>
				</section>
			</section>
		</section>
		<section class="container answer-content">
			<section class="answer-timer">
				<section class="top">
					<img src="./images/icons/timer.png" alt="">
					<section class="time" v-if="!done ">
						<span>已用时</span>
						<section class="time-bar">
							{{ getTime(time) }}
						</section>
					</section>
				</section>
				<section class="answer-progress">
					答题进度（共{{ questionList.length }}题）
				</section>
				<section class="progress">
					<section class="progress-bar" :style="{width: (index + 1) / questionList.length * 100 + '%'}"></section>
				</section>
			</section>
			<section class="list">
				<section class="title"><img src="./images/icons/score.png" alt="">{{saixiang}}</section>
				<section class="question">
					<template v-if="!done">
						<section class="question-title">
							{{ index + 1 }}、编程题（{{currQuestion.score}}）
						</section>
						<section class="question-content">
							<section class="title">{{ currQuestion.title }}</section>
							<img class="q-img" v-if="currQuestion.img" :src="currQuestion.img" alt="">
							<section class="buttons" style="margin-top: 30px;">
								<a class="btn active" @click="openform(currQuestion.id,currQuestion.codeFileUrl,currQuestion.editorUrl)" href="javascript:;">
									进入编辑器开始答题
								</a>
							</section>
						</section>
						<section class="answer-title question-title">学生答案</section>
						<section class="answer">

								<a class="btn active" v-if="answersList[index]" @click="openform1(answersList[index].file,currQuestion.reviewEditorUrl)" style="color:#fb4747">
									预览答案
								</a>


							<Empty src="images/empty-exam.png" text="还未答题" v-else></Empty>
						</section>
					</template>
					<section class="done" v-else>
						<section class="scores">
							<section class="title">总分</section>
							<section class="code-score score">评分中</section>
						</section>
						<section class="tips">最终得分请在比赛结果中查看</section>
						<!-- <a class="btn" :href="'./team.html?id=' + matchId">返回参赛详情</a> -->
					</section>
				</section>
				<section class="buttons" style="margin-top: 30px;">
					<a v-if="index > 0" href="javascript:;" class="prev btn" :class="{active: index > 0}" @click="prev">上一题</a>
					<a class="btn" :class="{active: answersList[index]}" @click="next" href="javascript:;">
						{{ index === questionList.length - 1 ? '交卷' : '下一题'}}
					</a>
				</section>
			</section>
		</section>
	</section>
	<common-footer></common-footer>
</section>
<script src="./js/jquery.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="./lib/layui/lay/modules/layer.js"></script>
<script src="./js/vue.min.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/match/api/tmatch.js"></script>
<script src="../js/abkj/ext/matchExt.js"></script>
<script src="../js/abkj/ext/matchExt.js"></script>
<script src="../js/abkj/ext/signExt.js"></script>
<script src="./js/common.js"></script>
<script src="./components/index.js"></script>
<script>
	$(function () {
		var toDouble = num => {
			return num >= 10 ? num : '0' + num
		}
		var getTime = function (seconds) {
			if (seconds < 3600) {
				var minutes = parseInt(seconds / 60)
				var sec = parseInt(seconds % 60)
				return `${toDouble(minutes)}:${toDouble(sec)}`
			}
			var hours = parseInt(seconds / 3600)
			var remain = seconds - hours * 3600
			return toDouble(hours) + ':' + getTime(remain)
		}
		var tool = fun_tool()

		var vm = new Vue({
			el: '.wrapper',
			data: {
				time: 0,
				matchId: tool.getUrlParam('id'),
				index: 0,
				allTime: 3600,
				saixiang:'',
				done: false,
				timer: null,
				isload:0,
				questionList: [
					{
						type: 1,
						score: 10,
						title: '小猫迷路了，它必须沿着地面的标记才能走出迷宫。下面哪段程序能帮助它呢？',
						img: './images/about1.png',
					},
					{
						type: 2,
						score: 10,
						title: '小猫迷路了，它必须沿着地面的标记才能走出迷宫。下面哪段程序能帮助它呢？',
						img: '',
					},
					{
						type: 1,
						score: 10,
						title: '小猫迷路了，它必须沿着地面的标记才能走出迷宫。下面哪段程序能帮助它呢？',
						img: '',
					},
				],
				form: null,
				gameInfo: {
					chedulesList: [],
					tmatch: {
						createTime: '',
						endTime: '',
					}
				},
				userInfo: tool.getUserInfo(),
				teamInfo: {},
				answersList: []
			},
			computed: {
				currQuestion() {
					return this.questionList[this.index] || {}
				}
			},
			mounted: function () {
				var vm = this
				vm.getdata()
				this.start()
				vm.userInfo && getTeamInfo({
					cond: {
						eq: {}
					}
				}, function (data) {
					if (data.teamInfo && data.teamInfo.matchId == vm.matchId) {
						vm.teamInfo = data.teamInfo
						// 通过teamList进行过滤到队员信息
						vm.userList = data.teamList.filter(function (item) {
							// roleType === 0 学生
							return  item.roleType === 0 || item.roleType === 2
						}).map(function (item) {
							item.isInTeam = item.state === 1 //根据state判断是否已经在队伍中
							item.isInvited = true
							item.name = item.memberName || ''
							item.school = item.schoolName || ''
							return item
						})
						// 通过teamList进行过滤获取到教师信息
						vm.teacher = data.teamList.filter(function (item) {
							// roleType === 1 教师
							return item.roleType === 1
						}).map(function (item) {
							item.isInTeam = item.state === 1
							item.isInvited = true
							item.name = item.memberName || ''
							item.school = item.schoolName || ''
							return item
						})[0] || vm.teacher
						vm.step = data.teamInfo.state + 1
						// 步骤到第二步
					}else{
					}
				}, function () {})
				layui.use(['form'], function () {
					vm.form = layui.form
					vm.form.on('submit(submit)', function (data) {
						console.log(data)
					})
				})
			},
			methods: {
				openform1:function(codeFileUrl,editorUrl){
				//    alert(codeFileUrl)
				//    alert(editorUrl)
					var url2=editorUrl
					var url1=codeFileUrl
					var myurl="Preview0.html?url2="+url2
					myurl+='&url1='+url1
					// myurl=getArgument(myurl)
					window.open(myurl)
				},
				openform:function(id,codeFileUrl,editorUrl){
					if (editorUrl==undefined||editorUrl==null||editorUrl==''){
						alert("没有获得到匹配的编程题！")
						return false
					}

           var url2=editorUrl
					 var url1=codeFileUrl
					 var qid=id
           var Tdtoken=localStorage.myusertoken
					//  alert(Tdtoken)
					var recource= codeFileUrl
          var endtime=localStorage.endTime
          var startime=localStorage.startTime
					var myurl="Preview.html?url2="+url2
					myurl+='&url1='+url1
					myurl+='&qid='+qid
					myurl+='&Tdtoken='+Tdtoken
					myurl+='&recource='+recource
					myurl+='&endtime='+endtime
					myurl+='&startime='+startime
					myurl+='&myteamid='+localStorage.myteamid
					var ischecked=0
					for (i=0;i<vm.answersList.length;i++){
						if (id==vm.answersList[i].examId){
							  ischecked=1
								break
						}
					}
					if (ischecked==1){
						alert("该编程题已经提交过答案，不允许重复提交！")
						return false
					}
				  window.open(myurl)
				},
				getdata:function(){
					   var that=this
             window.setInterval(function(){
							 startCoding({}, function (data) {
 								// alert(JSON.stringify(data))
 								that.answersList=data.recordList



 							})
						},4000)
             this.saixiang=localStorage.saixiang
						 var data=JSON.parse(localStorage.tilist)
						 var list=data.questionList
						 var list1=[]
						 for (i=0;i<list.length;i++){
							  var json={
									type: 0,
									score: list[i].score,
									title: list[i].questionTopic,
									img: list[i].imgUrl,
									id:list[i].id,
									codeFileUrl:list[i].codeFileUrl,//String 代码文件
                  editorUrl:list[i].editorUrl,//String 考试编辑器链接
                  reviewEditorUrl:list[i].reviewEditorUrl,//String 试题预览编辑器链接
									answersList:''

								}
								list1.push(json)
						 }
						 this.questionList=list1

				},
				start() {
					var vm = this
					this.timer = setInterval(function () {
						if (vm.time === vm.allTime) {
							clearInterval(vm.timer)
							vm.$confirm({
								title: '答题时间到，已自动交卷'
							})
							this.over()
							return
						}
						vm.time ++
					}, 1000)
				},
				next: function () {
					var vm = this
					if (!this.answersList[this.index]) return
					if (this.index === this.questionList.length - 1) return this.$confirm({
						title: '确认交卷吗？',
						success: function () {
							if (vm.isload==1){
								
								alert("已经交卷了，不能再次交卷！")
								vm.over()
								return false
							}
							vm.over()
						}
					}, 1000)
					this.index ++
				},
				over: function () {
					this.isload=1
					this.done =true

				},
				getTime: getTime,
				prev: function () {
					this.index --
				}
			}
		})
	})
	// alert(vm)
	function getArgument(_arg)
{
    var _t=window.location.href.split("?")
    if(_t.length>1)
    {
        var reg = new RegExp("(^|&)"+ _arg +"=([^&]*)(&|$)");
        　　　　 var r = _t[1].match(reg);
        　　　　 if(r!=null)return  unescape(r[2]); return "";
    }
    return "";
}
</script>
</body>
</html>
